<!DOCTYPE html>
<html>
    <head>
        <title>1</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
       <div id="root">
            <h2>人员列表-遍历数组</h2>
            <input type="text" placeholder="输入" v-model="keyWord">
            <br/>
            <div>watch实现</div>
            <ul>
                <li v-for="(p,key) in showPerson" :key="p.id">
                    {{p.name}}-{{p.age}}--{{key}}
                </li>
            </ul>
            <br/>
            <div>computed实现</div>
            <ul>
                <li v-for="(p,key) in filterPersons" :key="p.id">
                    {{p.name}}-{{p.age}}--{{key}}
                </li>
            </ul>
            <br/>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false
            new Vue({
                el: '#root', 
                data(){
                    return {
                        persons:[
                            {id:'001',name:'马冬梅',age:18 ,sex:'女'},
                            {id:'002',name:'周冬雨',age:118,sex:'女'},
                            {id:'003',name:'周杰伦',age:218,sex:'男'},
                            {id:'004',name:'温兆伦',age:218,sex:'男'},
                        ],
                        keyWord:'',
                        showPerson:[],
                        
                    }
                },
                watch: {
                    keyWord: {
                        immediate: true,//需要手动配置才能一进来就调用
                        handler(newVal, oldVal) {
                            this.showPerson = this.persons.filter(
                                p => {
                                    return p.name && p.name.includes(newVal)
                                }
                            )
                        }
                    }
                },
                computed: {
                    //默认一上来就会调用
                    filterPersons() {
                        return this.persons.filter(p => p.name && p.name.includes(this.keyWord))
                    }
                }
            })
        </script>
    </body>
</html>
